import React from 'react';
import Parser from './parse';

class Line extends React.Component {
    constructor(props){
        super(props);
        this.callback=props.callback;
        this.handleClick = this.handleClick.bind(this);
    }
    render(){
        let that=this;
        setTimeout(function(){
            that.preview();
        },1000);
        return (
            <div>
                <input type="hidden" value={this.props.state.time} />
                <span className="opts-label">请按步骤完成下面的设置:</span>
                <div className="opts-splitline"></div>
                <span className="opts-label">1、设置Legend:</span>
                <div className="opts-item">
                    <input readOnly="readOnly" type="text" className="form-control" data-id="legend" placeholder="请在左侧画布选择" value={this.props.state.legend}/>
                    <button data-cmd="legend" onClick={this.handleClick}>选定</button>
                </div>
                <span className="opts-label">2、设置Category:</span>
                <div className="opts-item">
                    <input readOnly="readOnly" type="text" className="form-control" data-id="category" placeholder="请在左侧画布选择" value={this.props.state.category}/>
                    <button data-cmd="category" onClick={this.handleClick}>选定</button>
                </div>
                <span className="opts-label">3、设置Value:</span>
                <div className="opts-item">
                    <input readOnly="readOnly" type="text" className="form-control" data-id="value" placeholder="请在左侧画布选择" value={this.props.state.value}/>
                    <button data-cmd="value" onClick={this.handleClick}>选定</button>
                </div>
                <div className="opts-splitline"></div>
                <span className="opts-label">4、图表预览:</span>
                <div id="chartViewer" className="opts-item" style={{height:'200px'}}>
                请先完成设置！
                </div>
            </div>
        )
    }
    handleClick(e){
        let cmd=e.target.getAttribute('data-cmd');
        if(typeof this.callback==='function'){
            this.callback(cmd);
        }
    }
    preview(){
        let that=this;
        let data=this.props.chartdata;
        let option=Parser.line(data);
        if(!!option) this.showChart(option);
    }
    showChart(option){
        var myChart = echarts.init(document.getElementById('chartViewer'));
        myChart.setOption(option);

        this.callback('chartoption',option);
    }
}

export default Line;